<template>
    <div class="nav-menu">
        <div class="container">
            <ul>
                <li v-for="(item, index) in menuList"  :class="{'on':currentActiveMenu === item.name, 'cover':currentCoverMenu === item.name}"  v-on:click="handleClick(item.name)"  v-on:mouseenter="handleMenuMouseEnter(item.name)" v-on:mouseleave="handleMenuMouseLeave()" v-bind:key="index">
                    <router-link :to="{ name: item.name, params: { }}">{{item.title}}</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "nav-menu",
        data() {
            return {
                currentActiveMenu:'index',
                currentCoverMenu:'index',
                menuList: [
                    {
                        name:'index',
                        title:'首页',
                    },
                    {
                        name:'TouristList',
                        title:'景点',
                    },
                    {
                        name:'FoodList',
                        title:'美食',
                    },
                    {
                        name:'BmList',
                        title:'便民',
                    },
                ]
            }
        },
        methods: {
            handleClick: function (sign) {
                this.currentActiveMenu = sign
            },
            handleMenuMouseEnter: function (sign) {
                this.currentCoverMenu = sign
            },
            handleMenuMouseLeave: function () {
                this.currentCoverMenu = ""
            }
        }
    }
</script>

<style lang="scss">
    .nav-menu {
        width: 100%;
        height: 46px;
        min-width: 1200px;
        background: #2064c8;
        .container {
            min-width: 1200px;
            width: 1200px;
            margin: 0 auto;
            height: 46px;
            position: relative;
            ul {
                width: 100%;
                height: 46px;
                li {
                    width: 8.33%;
                    height: 46px;
                    margin-left: -2px;
                    border-right: 1px solid #3774ce;
                    position: relative;
                    float: left;
                    a {
                        display: block;
                        width: 99%;
                        height: 44px;
                        line-height: 42px;
                        color: #f9fef8;
                        font-size: 18px;
                        text-align: center;
                    }
                }

                li.on {
                    background: 0 0;
                    a {
                        background: #003679;
                        border-top: 2px solid #ff8848;
                        color: #fff;
                        text-decoration: none;                    }
                }

                li.cover {
                    background: 0 0;
                    a {
                        background: #fff;
                        border-top: 2px solid #ff8848;
                        color: #333;
                        text-decoration: none;                    }
                }
            }
        }
    }
</style>
